<template>
  <div class="pie-chart"/>
</template>
<script setup >
import * as echarts from 'echarts';
import 'echarts/theme/macarons';

nextTick(() => {
  initChart();
});

const props = defineProps({
  active: {
    type: Boolean,
    default: false
  }
});

const { active } = toRefs(props);

let chart = null;
const flg = ref(false);

watch(active, () => {
  flg.value = active.value;
  if (flg.value) {
    if (chart) {
      const v = chart.getOption();
      chart.clear();
      chart.setOption(v);
    }
    flg.value = false;
  }
});

onUnmounted(() => {
  if (chart) {
    return;
  }
  chart.dispose();
  chart = null;
});
const { proxy } = getCurrentInstance();
const { t } = useI18n();
const initChart = () => {
  chart = echarts.init(proxy.$el, 'macarons');
  chart.setOption({
    title: {
      text: 'Hobby',
      left: 'center',
      orient: 'vertical'
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b} :{d}%'
    },
    series: [
      {
        name: '能力分布',
        type: 'pie',
        roseType: 'radius',
        data: [
          { value: 35, name: t('page4.title.c1') },
          { value: 30, name: t('page4.title.c2') },
          { value: 15, name: t('page4.title.c3') },
          { value: 10, name: t('page4.title.c4') },
          { value: 5, name: t('page4.title.c5') },
          { value: 2, name: t('page4.title.c6') },
          { value: 2, name: t('page4.title.c7') }
        ],
        animationDuration: 1600,
        animationDelay: 1000
      }
    ]
  });
};
</script>
